<template>
  <transition-group tag="ul">
    <div class="boxLists" v-for="(item, index) in taskNodeInfos" :key="Math.floor(Math.random() * 10000) + index">
      <!-- 第一级普通 -->
      <div class="ordinary" v-if="item.childNode == null || item.childNode.length < 2">
        <div class="list" :class="{cur:tindex === index}">
          <div class="left">
            <div class="number">{{ index + 1 }}</div>
          </div>
          <!-- <slot name="rigth" :item="item" /> -->
          <div class="right">
            <div class="text">第{{ index + 1 }}级审核</div>
            <slot name="rigth_content" :scoped="item" :index="index"></slot>
          </div>
          <!-- 线 -->
          <div class="buttom_line" v-if="index != taskNodeInfos.length - 1"></div>
          <!-- 修改删除移动操作图标 -->
          <div class="showIcons" v-if="showIcon">
            <!--上移-->
            <div
              v-if="index != 0"
              title="上移"
              class="icon top"
              :class="index == taskNodeInfos.length - 1 ? 'offset_up_icon' : ''"
              @click="up(taskNodeInfos, index)"
            >
              <a-icon type="up" />
            </div>
            <!--下移-->
            <div v-if="index != taskNodeInfos.length - 1" class="icon down" title="下移" @click="down(taskNodeInfos, index)">
              <a-icon type="down" />
            </div>
            <!--编辑-->
            <div class="icon check" id="check" ref="check">
              <!-- <a-tooltip :visible="tindex === index? true: false" :arrowPointAtCenter="true" placement="right" trigger="click" overlayClassName="toolip-zj">
                <div slot="title">
                  <tooltipNode ref="ProcessFigure" :order="index" v-model="taskNodeInfos[index]" @getTaskNodeInfos="getTaskNodeInfos"  @closeTooltip="closeTooltip" />
                </div> -->
                <a-icon type="mobile" title="编辑" @click="handleTooltip(index, taskNodeInfos[index])" />
              <!-- </a-tooltip> -->
            </div>
            <!--删除-->
            <div class="icon del" title="删除" @click="delNode(taskNodeInfos, index)">
              <a-icon type="delete" />
            </div>
          </div>
          <!-- 眼睛图标 -->
          <div class="showIcons" v-if="showYey">
            <div class="icon" v-if="item.executeStatus == '0'">
              <!-- 通过 -->
              <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
            <div class="icon" v-if="item.executeStatus == '1'">
              <!-- 拒绝 -->
              <a-icon type="stop" theme="twoTone" twoToneColor="red" />
            </div>
            <div class="icon" v-if="item.executeStatus == '2'">
              <!-- 未查看 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#515151" />
            </div>
            <div class="icon" v-if="item.executeStatus == '3'">
              <!-- 已查看 未审核 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="item.executeStatus == '4'">
              <!-- 其他方式通过 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="item.executeStatus == '5'">
              <!-- 其他方式拒绝 -->
              <a-icontype="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="item.executeStatus == '6'">
              <!-- 撤回 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
          </div>
        </div>
      </div>
      <div v-else class="willAndOr" v-for="(childItem, count) in item.childNode" :key="count">
        <div class="list">
          <div class="left">
            <div class="number">{{ index + 1 }}</div>
          </div>
          <div class="right">
            <div class="text">第{{ index + 1 }}级审核</div>
            <slot name="rigth_content" :scoped="childItem" :index="index"></slot>
          </div>
          <!-- 线 -->
          <div class="buttom_line" v-if="count != item.childNode.length - 1">
            <span class="or">{{ item.approveType == '02' ? '会' : item.approveType == '03' ? '或' : '' }}</span>
          </div>
          <div class="left_line"></div>
          <div class="chang_line" :class="index == 0 && count == 0 ? 'frist_del_25' : ''">
            <div class="del_50"></div>
          </div>
          <!-- 修改删除移动操作图标 -->
          <div class="showIcons" v-if="showIcon">
            <div class="icon" @click="see(childItem)">
              <a-icon type="mobile" />
            </div>
            <!-- 提示框 -->
            <div class="icon check">
              <a-tooltip placement="right" trigger="click" overlayClassName="toolip-zj">
                <div slot="title">
                  ssss
                  <!-- <tooltipNode ref="ProcessFigure1" v-model="item.childNode[count]"> </tooltipNode> -->
                </div>
                <a-icon type="mobile" />
              </a-tooltip>
            </div>
            <div class="icon del" @click="delNode(item.childNode, count, index, item, childItem)">
              <a-icon type="delete" />
            </div>
          </div>
          <!-- 眼睛图标 -->
          <div class="showIcons" v-if="showYey">
            <div class="icon" v-if="childItem.executeStatus == '0'">
              <!-- 通过 -->
              <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '1'">
              <!-- 拒绝 -->
              <a-icon type="stop" theme="twoTone" twoToneColor="red" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '2'">
              <!-- 未查看 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#515151" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '3'">
              <!-- 已查看 未审核 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '4'">
              <!-- 其他方式通过 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="iscon" v-if="childItem.executeStatus == '5'">
              <!-- 其他方式拒绝 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
            <div class="icon" v-if="childItem.executeStatus == '6'">
              <!-- 撤回 -->
              <a-icon type="eye" theme="twoTone" twoToneColor="#d81e06" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition-group>
</template>
<script>
  // import tooltipNode from './tooltipNode'

  export default {
    name: 'ProcessFigure',
    model: {
      prop: 'taskNodeInfos',
      event: 'change',
    },
    // components: {
      // tooltipNode,
    // },
    props: {
      id: String,
      taskNodeInfos: {
        type: Array,
        required: false,
      },
      showIcon: {
        type: Boolean,
        required: false,
      },
      showYey: {
        type: Boolean,
        required: false,
      }
    },
    data() {
      return {
        tindex: -1,
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 13 },
          },
        },
      }
    },
    created() {},
    computed: {},
    methods: {
      change(data) {
        console.log(data)
        this.$emit('change', data)
      },
      //流程图交互效果
      addNode(count) {
        let newArrNode = {
          approveType: count,
          childNode: [
            { approveType: 1, expireAction: '短信', phaseName: '一级助理审核', taskUser: 'jl1' },
            { approveType: 2, expireAction: '短信', phaseName: '二级助理审核', taskUser: 'jl2' },
          ],
          phaseName: '测试或签跟会签',
        }
        console.log(this)
        this.$refs.addNode.$refs.modal.show()
        // this.taskNodeInfos.push(newArrNode)
      },
      delNode(fatherArr, index, fatherIndex, fatherObj, childItem) {
        //会签或签的时候才会传父对象
        if (fatherObj && fatherArr.length <= 2) {
          //只有2个元素的时候变为一级 把子对象属性加到父对象
          fatherObj.childNode = []
          fatherObj = { ...fatherObj, ...childItem }
          fatherObj.approveType = '01'
          // this.$nextTick(() => {
          //   this.taskNodeInfos[fatherIndex] = fatherObj
          // })
        } else {
          fatherArr.splice && fatherArr.splice(index, 1)
        }
      },
      down(father, index) {
        father[index] = father.splice(index + 1, 1, father[index])[0]
      },
      up(father, index) {
        father[index] = father.splice(index - 1, 1, father[index])[0]
      },
      closeTooltip() {
        this.tindex = -1
      },
      handleTooltip(index, record) {
        console.log("1111111111111111", index, record)
         this.tindex = index
         this.$emit('fatherMethod', index+1, record);
      },
      getTaskNodeInfos(val, order) {
        if(val && Object.keys(val).length > 0) {
          this.taskNodeInfos[order] = val
        }
        this.closeTooltip()
      },
    },
    watch: {
      taskNodeInfos(val) {
        this.data = JSON.parse(JSON.stringify(val))
        this.data.forEach(item => {
          if (item.childNode == null || item.childNode == undefined) {
            item.childNode = []
          }
        })
      },
    },
  }
</script>
<style lang="less">
.toolip-zj {
  z-index: 1000;
  left: 710px !important;
  border-radius: 4px;
  .ant-tooltip-content {
    width: 570px;
    height: 366px;
    background-color: none !important;
    border: none;
    border-radius: 4px;
    background-color: #fff !important;
  }
  .ant-tooltip-inner {
    padding: 0;
    background-color: #fff !important;
    .text_box {
      padding: 2px 16px;
      height: 39px;
      border-bottom: 1px solid rgba(217, 217, 217, 1);
      display: flex;
      align-items: center;
      color: #333;
      margin-bottom: 10px;
    }
  }
}
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateY(80px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.6s ease;
  }

  .v-move {
    transition: all 0.6s ease;
  }

  .v-leave-active {
    position: absolute;
  }
  .ProcessFigure {
    margin: 0;
    padding: 0;
    .list {
      .showIcons {
        position: absolute;
        right: 0;
        top: 0;
      }
      display: flex;
      position: relative;
      margin: 0 0 25px 0;
      align-items: center;
      // width: 40%;
      height: 64px;
      background: inherit;
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(232, 232, 232, 1);
      border-radius: 4px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: 'Microsoft YaHei Regular', 'Microsoft YaHei';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.8);
      line-height: 22px;
      &:hover,&.cur {
        border-color: rgba(24, 144, 255, 1);
      }
      .left {
        width: 50px;
        .number {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 62px;
          border-radius: 5px;
          background-color: #e8e8e8;
          color: #2e2e6a;
          margin-right: 10px;
          border-top-right-radius: 0px;
          border-bottom-right-radius: 0px;
        }
      }
      .right {
        padding-left: 8px;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        margin-right: 10px;
        justify-content: space-between;
        .rigth_content {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
        .lable {
          display: flex;
        }
      }
      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        top: 0;
        right: 0;
        transform: translate(-50%, -50%);
        border: 1px solid gray;
        background-color: #fff;
        .a-icon {
          z-index: 10;
        }
        &.top {
          transform: translate(-425%, -50%);
        }
        &.offset_up_icon {
          transform: translate(-300%, -50%);
        }
        &.down {
          transform: translate(-300%, -50%);
        }
        &.check {
          transform: translate(-175%, -50%);
        }
      }
      .buttom_line {
        position: absolute;
        bottom: -1px;
        transform: translate(0, 100%);
        left: 25px;
        width: 2px;
        height: 25px;
        background-color: #eee;
        .or {
          font-size: 12px;
          position: absolute;
          left: 0;
          top: 0;
          transform: translate(50%, 10%);
        }
      }
      .left_line {
        position: absolute;
        left: 0;
        transform: translate(-100%, 100%);
        height: 2px;
        width: 25px;
        background-color: #eee;
      }
      .chang_line {
        position: absolute;
        left: 0;
        transform: translate(-25px, 0);
        height: 115px;
        width: 2px;
        background-color: #eee;
      }
      .frist_del_25 {
        .del_50 {
          position: absolute;
          top: 0;
          left: 0;
          width: 2px;
          height: 58px;
          border: 1px solid #fff;
          transform: translate(0, 0);
        }
      }
    }
  }
  .boxLists {
    .willAndOr {
      margin-left: 50px;
    }
  }
</style>
